<template>
  <uni-ec-canvas
    class="uni-ec-canvas"
    ref="canvas"
    canvas-id="uni-ec-canvas-funnel-charts-3.0"
    :ec="ec"
    style="width: 100%; height: 100%"
    :force-use-old-canvas="true"
    @inited="inited">
  </uni-ec-canvas>
</template>

<script>
import { deepMerge } from '@/utils';
import { titleOption, tooltipOption, legendOption, funnelSeries } from './options.js';
import uniEcCanvas from '../uni-ec-canvas/uni-ec-canvas.vue'

let funnelChart = undefined
export default {
  name: 'FunnelCharts',
  components: {
    uniEcCanvas
  },
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 数据
    dataList: {
      type: Array,
      default: () => []
    },
    // 指标字段名数组
    indexList: {
      type: Array,
      default: () => []
    },
    // 图例显示名格式化函数
    legendFormatter: {
      type: [Function, String],
      default: '{name}'
    },
    // 维度设置
    dimension: {
      type: String,
      default: undefined
    },
    // 是否显示提示
    tooltip: {
      type: Boolean,
      default: false
    },
    position: {
      type: Object,
      default: () => {
        return {

        };
      }
    },
    // 图表配置项（会覆盖上面的选项）
    options: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      ec: {
        option: {} //echart 配置项
      }
    }
  },
  computed: {
    // 图例显示名称格式化
    legendFormatterImpl () {
      if (typeof this.legendFormatter === 'string') {
        return this.legendFormatter;
      } else if (typeof this.legendFormatter === 'function') {
        return this.legendFormatter;
      } else {
        return '{name}';
      }
    },
    indexFieldName () {
      return (this.indexList || []).map(item => item.fieldName);
    },
    indexShowName () {
      return (this.indexList || []).map(item => item.showName || item.fieldName);
    },
    getLegend () {
      return {
        ...legendOption,
        formatter: this.legendFormatterImpl,
        data: this.getSeriesData.map(item => item.name).filter(item => item != null)
      };
    },
    getTitleOption () {
      return {
        ...titleOption,
        show: this.title != null && this.title !== '',
        text: this.title
      };
    },
    getTooltipOption () {
      return {
        ...tooltipOption,
        show: this.tooltip
      };
    },
    getSeriesData () {
      if (this.dimension == null || this.dimension === '') {
        // 没有设置维度，返回指标数组
        const data = (this.dataList || [])[0];
        if (data == null) return [];
        return (this.indexList || []).map(item => {
          return {
            name: item.showName || item.fieldName,
            value: data[item.fieldName]
          };
        });
      } else {
        // 设置维度，根据维度分组取第一个指标值
        if (!Array.isArray(this.indexFieldName) || this.indexFieldName.length === 0) return [];
        return (this.dataList || []).map(data => {
          return {
            name: data[this.dimension],
            value: data[this.indexFieldName[0]]
          };
        });
      }
    },
    getSeries () {
      let current = Object.assign({},{
        left: '10%',
        right: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        orient: 'vertical',
        sort: 'descending'
      },this.position)

      return (this.indexList || []).map(item => {
        return {
          ...funnelSeries,
          ...current,
          name: item.showName || item.fieldName,
          data: this.getSeriesData
        };
      });
    },
    getOptions () {
      return {
        title: this.getTitleOption,
        legend: this.getLegend,
        tooltip: this.getTooltipOption,
        series: this.getSeries
      };
    },
    getFinalOptions () {
      let res = deepMerge(this.getOptions, this.options);
      this.ec.option = res
      return res
    }
  },
  methods: {
    inited(ins) {
      const option = this.getFinalOptions
      ins.setOption(option)
    },
    resize () {
      if (funnelChart) funnelChart.resize();
    }
  },
  watch:{
    dataList:{
      handler(val){
        // 此处要执行 否则 compute 有可能不会重新处理
        this.getFinalOptions
      },
      deep: true
    }
  }
};
</script>

<style></style>
